<template>
    <select class="form-select" v-model="yue" :name="`yue${tag}`">
        <option v-for="i of [['old', '旧约'], ['new', '新约']]" :value="i[0]">{{ i[1] }}</option>
    </select>
    <select class="form-select" v-model="juan" :name="`juan${tag}`">
        <option v-for="[full_name, [short_name,]] of Object.entries(datas)" :value="full_name">{{ full_name
            }}（{{ short_name }}）</option>
    </select>
    <select class="form-select" v-model="zhang" v-if="!!juan" :name="`zhang${tag}`">
        <option v-for="n of datas[juan][1]" :value="n">第 {{ String(n).padStart(3, '0') }} 章</option>
    </select>
    <select class="form-select" v-model="limit" :name="`limit${tag}`">
        <option v-for="n of 5" :value="n">每日 {{ n }} 章</option>
    </select>
</template>
<script setup>

import { ref, watchEffect, watch, onBeforeMount } from 'vue'

const datas = ref({})

const yue = defineModel('yue')
const juan = defineModel('juan')
const zhang = defineModel('zhang')
const limit = defineModel('limit')

const { tag } = defineProps(['tag'])

watch(juan, () => zhang.value = 1)
watchEffect(async () => {

    let resp = await fetch(`http://127.0.0.1:2000/get_scriptural_data/${yue.value}`, {
        method: 'GET',
        mode: 'cors',
    })
    if (resp.ok) {
        let data = JSON.parse(await resp.text())

        datas.value = data
        juan.value = Object.keys(data)[0]
    }
})
</script>

<style scoped>
select {
    margin-bottom: 8px;
}
</style>